<script setup>
import {
  listRecords,
  getRecords,
  delRecords,
  addRecords,
  updateRecords,
} from '@/api/system/sendRecords'

import { reactive } from 'vue'
const { proxy } = getCurrentInstance()

// visitorRecord_state
// 列表数据
const tableData = ref([])

const selectForm = ref([
  { type: '日期范围' },
  {
    label: '发送类型',
    type: '下拉单选',
    model: 'sendType',
    opt: [
      { label: '审核结果模板', value: '审核结果模板' },
      { label: '访客申请模板', value: '访客申请模板' },
    ],
  },
  {
    label: '状态',
    type: '下拉单选',
    model: 'sendState',
    opt: [
      { label: '成功', value: '1' },
      { label: '失败', value: '2' },
    ],
  },
  { label: '发送人', type: '输入框', model: 'sendBy' },
  { label: '接收人', type: '输入框', model: 'acceptBy' },
  { label: '接收人手机号', type: '输入框', model: 'acceptPhone' },
  { label: '发送手机号', type: '输入框', model: 'sendByPhone' },
])

// 列表枚举
const column = ref([
  { label: '发送人', prop: 'sendBy' },
  { label: '发送人电话', prop: 'sendByPhone' },
  { label: '接受人', prop: 'acceptBy' },
  { label: '接收人电话', prop: 'acceptPhone' },
  { label: '信息模板类型', prop: 'sendType' },
  { label: '发送信息模板状态', prop: 'sendState' },
  { label: '信息提示', prop: 'errorMsg' },

  { label: '创建时间', prop: 'createTime' },
  { label: '操作', prop: 'x', width: '240' },
])

const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false,
  btnLoading: false,
  ids: [],
  row: [],
})

// 删除
const removeAll = async (ids) => {
  const is = await proxy.DelMessageBox('是否确认删除所选的数据项？')
  if (!is) return
  try {
    proxy.$modal.loading('请稍后')
    await delRecords(state.ids)
    getList()
    proxy.successMsg('删除成功!')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 删除
const remove = async (id) => {
  const is = await proxy.DelMessageBox('是否确认删除该数据项？')
  if (!is) return
  try {
    proxy.$modal.loading('请稍后')
    await delRecords(id)
    getList()
    proxy.successMsg('删除成功!')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}
// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 列表选中 及 判断是否禁用删除 || 修改
const handleSelectionChange = ({ ids, row }) => {
  state.ids = ids
  state.row = row
}

const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// 获取列表
const getList = async () => {
  try {
    state.loading = true
    const result = await listRecords(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" />
    <el-button type="danger" @click="removeAll">批量删除</el-button>

    <x-table
      keyId="id"
      :loading="state.loading"
      :column="column"
      :data="tableData"
      :total="state.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @change="handleSelectionChange"
      @pagination="getList"
    >
      <template #columnCell="{ column, record }">
        <div v-if="column.prop == 'sendState'">
          <x-tag v-if="record.sendState == '1'" bgc="#1aa034" text="成功" />
          <x-tag v-if="record.sendState == '2'" bgc="red" text="失败" />
        </div>
        <div v-if="column.prop == 'x'" class="operate">
          <el-link icon="DeleteFilled" type="danger" @click="remove(record.id)"
            >删除</el-link
          >
        </div>
      </template>
    </x-table>
  </div>
</template>
<style scoped lang="scss">
.operate {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
